<!DOCTYPE html>
<html>
<head th:include="_header_include::frag(~{::title},~{::link},~{})">
    <title>电销顾问通话记录</title>
    <link th:href="@{'/font-awesome-4.7.0/css/font-awesome.css'}" rel="stylesheet">
    <!-- <link th:href="@{'/css/custom/callrecord/simpleAudio.css'}" rel="stylesheet"> -->
</head>
<body>
<div id="myCallRecordVm" class="mainPadding" style="display:none">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>电销管理</el-breadcrumb-item>
        <el-breadcrumb-item>电销顾问通话记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="marginB20">
        <el-button type="primary" @click="dialogChooseList = true"><i class="el-icon-menu"></i>选择列</el-button>
        <el-button type="primary" @click="searchYesterday" >昨天</el-button>
        <el-button type="success" @click="searchWeek" >近七天</el-button>
        <el-button type="warning" @click="searchMonth" >本月</el-button>
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
            <el-form :inline="true" class="demo-form-inline mainSearchForm">
                <el-form-item label="电销事业部:">
                    <el-select v-model="searchForm.teleDeptId" placeholder="电销事业部" value-key="id"
                               filterable clearable @change="changeTeleDept" :disabled="isDXSYBDisabled"  @clear="clearTeleDeptList">
                        <el-option
                                v-for="item in teleDeptList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电销组:">
                    <el-select v-model="searchForm.teleGroupId" placeholder="电销组" value-key="id"
                               filterable clearable @change="changeTeleGroup" :disabled="isDXZDisabled" @clear="clearTeleGroupList">
                       <el-option
                           v-for="item in teleGroupList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                       </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电销顾问:">
                    <el-select v-model="searchForm.accountId" placeholder="电销顾问" value-key="id" clearable filterable >
                       <el-option
                           v-for="item in tmList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                       </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="通话时间段:">
                    <el-date-picker v-model="searchForm.startTime" type="datetime" placeholder="选择开始日期"  value-format=" yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                    <el-date-picker v-model="searchForm.endTime" type="datetime" placeholder="选择结束日期" value-format=" yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
                </el-form-item>

                <el-row v-show="isShow">
                    <el-form-item label="坐席编号:">
                        <el-input placeholder="坐席编号"  v-model="searchForm.cno"></el-input>
                    </el-form-item>
                    <el-form-item label="坐席电话:">
                        <el-input placeholder="坐席电话"  v-model="searchForm.bindPhone"></el-input>
                    </el-form-item>                
                    <el-form-item label="接通状态:">
                        <el-select v-model="searchForm.callStatus" placeholder="接通状态" value-key="value"  clearable>
                           <el-option
                               v-for="item in callStatus"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                           </el-option>
                        </el-select>
                    </el-form-item> 
                    <el-form-item label="客户姓名:">
                        <el-input placeholder="客户姓名"  v-model="searchForm.customerName"></el-input>
                    </el-form-item>
                    <el-form-item label="客户电话:">
                        <el-input placeholder="客户电话"  v-model="searchForm.customerPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="通话类型:">
                        <el-select v-model="searchForm.callType" placeholder="通话类型" value-key="value" clearable >
                            <el-option
                                v-for="item in callTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资源类别:">
                        <el-select v-model="searchForm.category" placeholder="资源类别" clearable>
                            <el-option
                                    v-for="item in categoryArr"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-row>                 
                <div class="mainSearchBtnBox">
                    <el-button icon="el-icon-search" type="primary" @click="initCallRecordData" class="searchBtn">搜索</el-button>       
                    <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
                    <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span v-if="isShow">收起</span><span v-else>展开更多</span><i :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span>
                </div> 
            </el-form>
        </div>
        <div class="fs16 marginB20 callLogBox">
            通话总时长：<span style="color:red">{{totalTalkTime | fomatSeconds2}}</span>
            <!-- 播放器 -->
            <audio style="top: auto;bottom: 0;" id="audio" src="" controls="controls" autoplay="autoplay" controlsList="nodownload" oncontextmenu="return false" v-show="audioShow"></audio>
        </div>    
        <el-table 
            ref="multipleTable"
            tooltip-effect="dark"
            style="width: 100%"
            border
            :data="callRecordData" 
            >
            <el-table-column align="center" type="index" width="55" label="序号"> </el-table-column>
            <el-table-column align="center" :key="item.fieldCode" :prop="item.fieldCode" :label="item.displayName" :width="item.width" v-for="(item,key,index) in tableColums" v-if="item.fieldCode == 'callType'" :formatter="getCallTypeText" >
            </el-table-column>
            <el-table-column align="center" :key="item.fieldCode" :prop="item.fieldCode" :label="item.displayName" :width="item.width" v-else-if="item.fieldCode == 'startTime'" :formatter="getStartTimeText">
            </el-table-column>
            <el-table-column align="center" :key="item.fieldCode" :prop="item.fieldCode" :label="item.displayName" :width="item.width" v-else-if="item.fieldCode == 'callStatus'" :formatter="getCallStatusText">
            </el-table-column>
            <el-table-column align="center" :key="item.fieldCode" :prop="item.fieldCode" :label="item.displayName" :width="item.width" v-else-if="item.fieldCode == 'talkTime'" :formatter="getTalkTimeText">
            </el-table-column>
            <el-table-column align="center" :key="item.fieldCode" :prop="item.fieldCode" :label="item.displayName" :width="item.width" v-else></el-table-column>
              <el-table-column align="center"  label="操作" >
                <template slot-scope="scope" v-if="scope.row.talkTime >0 ">
                    <a :id="scope.row.id" class="sound-trigger sound-trigger--type-default sound-trigger--type-click cursorP" @click="switchSoundBtn(scope.row.id,scope.row.recordFile,scope.row.callSource)">
                        <span class="sound-trigger__inner"><i class="fa fa-play-1 fa-lg"></i></span>
                    </a>
                    <!-- <el-button type="danger" size="small" @click="downloadAudio(scope.row.id,scope.row.recordFile,scope.row.callSource)"><i class="el-icon-download"></i>下载</el-button> -->
                    <a class="download_img" @click="downloadAudio(scope.row.id,scope.row.recordFile,scope.row.callSource)"></a>
                </template>
            
            </el-table-column>
            
        </el-table>
        <table-pagination :pager="pager" @change="initCallRecordData"></table-pagination>
    </div>
    <!-- 自定义列 -->
    <el-dialog title="自定义列" :visible.sync="dialogChooseList" class="elCheckboxGroup" width="870px">
        <el-form :model="fieldFrom">
            <el-form-item label="" prop="type">
                <el-checkbox-group v-model="fieldFrom.type">
                    <el-checkbox :label="item.sortNum+'_'+item.fieldCode+'_'+item.displayName+'_'+item.id+'_'+item.width"  name="type" :key="item.fieldCode"  v-for="(item,index) in  allTableColums ">
                        {{item.displayName}}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirmColumn">确 定</el-button>
            <el-button @click="dialogChooseList = false">取 消</el-button>
        </div>
    </el-dialog>
</div>

</body>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">
   var tmList = [[${tmList}]];
   var teleGroupList = [[${teleGroupList}]];
   var teleDeptList  = [[${teleDeptList}]];
   var userId = [[${userId}]]+"";
   var roleCode = [[${roleCode}]];
   var orgId = [[${orgId}]]+"";
   var ownOrgId=[[${ownOrgId}]];//电销总监电销组
   var curDeptId =[[${curDeptId}]];
   var fieldList=[[${fieldList}]];//自定义字段
   var userFieldList=[[${userFieldList}]];//用户自定义字段
</script>
<!-- 当前页面的js -->
<script th:src="@{/js/custom/callrecord/telCallRecord.js}"></script>
<!-- <script th:src="@{/js/custom/callrecord/simpleAudio.js?v=1.0.0}"></script> -->
<script th:src="@{/js/custom/callrecord/simpleAudio02.js?v=1.0.0}"></script>
<script th:src="@{/js/custom/callrecord/download.js?v=1.0.0}"></script>

<style>
    .fa-play-1 {
        width: 34px;
        height: 34px;
        display: inline-block;
        background-image: url(/images/icon_play.png);
        background-repeat: no-repeat;
    }
    .fa-stop-1 {
        width: 34px;
        height: 34px;
        display: inline-block;
        background-image: url(/images/icon_stop.png);
        background-repeat: no-repeat;
    }
    .download_img {
        width: 34px;
        height: 34px;
        display: inline-block;
        background-image: url(/images/icon_download.png);
        background-repeat: no-repeat;
    }
</style>
</html>